<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" type="text/css" media="screen" href="/css/bootstrap.min.css">
    <link rel="stylesheet" type="text/css" media="screen" href="/css/dataTables.bootstrap.min.css">
    <link rel="stylesheet" type="text/css" media="screen" href="/layui/css/layui.css">
    <link rel="stylesheet" href="/css/treetable/jquery.treetable.css"/>
    <link rel="stylesheet" href="/css/treetable/jquery.treetable.theme.default.css"/>
    <link rel="stylesheet" type="text/css" href="/css/bootstrap-select.min.css">
    <link rel="stylesheet" type="text/css" href="/at-js/css/jquery.atwho.css">
    <script src="/js/libs/jquery-2.1.1.min.js"></script>
    <script src="/js/bootstrap/bootstrap.min.js"></script>
    <script src="/js/bootstrap/bootstrap-select.min.js"></script>
    <script src="/js/jq.js"></script>
    <script src="/js/plugin/bootstrapvalidator/bootstrapValidator.min.js"></script>
    <script src="/js/common.js"></script>
    <script src="/layui/layui.js"></script>
    <script src="/js/dict.js"></script>
    <script src="/js/libs/jquery.ztree.all-3.5.min.js"></script>
    <script src="/js/my/ztree-menu.js"></script>
    <script src="/js/my/permission.js"></script>
    <script src="/js/plugin/datatables/jquery.dataTables.min.js"></script>
    <script src="/js/plugin/datatables/dataTables.bootstrap.min.js"></script>
    <script src="/js/libs/jquery.treetable.js"></script>
    <script src="/js/plugin/jquery-caret/jquery.caret.js"></script>
    <script src="/at-js/js/jquery.atwho.js"></script>
    <style>
        .layui-icon-star:hover, .layui-icon-star-fill:hover {
            cursor: pointer;
            transform: scale(1.2);
            -webkit-transform: scale(1.2);
        }
    </style>
</head>
<body>
<div class="col-xs-12 col-sm-12 col-md-6 col-lg-6 col-md-offset-2 col-lg-offset-2">
    <div class="">
        <form class="form-horizontal" onsubmit="return false" id="form">
            <div class="panel panel-default" name="msg" id="msg" contenteditable="true"
                 style="width: 100%; height: 100%; min-height: 100px;"></div>
        </form>
    </div>
</div>
</body>
</html>
<script type="text/javascript">
    layui.use(['layer', 'element'], function () {
        var layer = layui.layer;
        var element = layui.element;
    });
    var id = parent.id;
    $(function () {
        $('#form').bootstrapValidator();
        runAt();
    });

    function runAt() {
        var users = [];

        $.ajax({
            type: 'get',
            url: '/users/partList/' + id,
            async: false,
            success: function (json) {
                if (json.code === 0) {
                    users = json.data;
                }
            }
        });

        let offset = $('#msg').offset();
        offset.top += 20;

        var at_config = {
            at: "@",
            data: users,
            searchKey: 'nickname',
            headerTpl: '<div class="atwho-header">User List<small>↑&nbsp;↓&nbsp;</small></div>',
            insertTpl: '<span data-id="${id}" name="atUsers">@${nickname}</span>',
            displayTpl: "<li>${nickname} <small>${username}</small></li>",
            limit: 5,
            offset: offset
        };

        var $inputor = $('#msg').atwho(at_config);
        // $inputor.caret('pos', 47);
        // $inputor.focus().atwho('run');
    }

</script>
